<template>
  <div id="teacher">
    <!-- 用户列表导航 -->
    <template>
      <div class="cic-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>教师管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>

    <!--视图 -->
    <el-card>
      <template>
        <div>
          <el-row>
            <!-- 搜索信息 start-->
            <el-col :span="2">查询教师信息:</el-col>
            <!-- 搜索框-->
            <el-col :span="4">
              <el-input
                class="selectNotice"
                v-model="queryInfo.teacherName"
                placeholder="请输入教师姓名"
                clearable
                @clear="getTeacherList"
              ></el-input>
            </el-col>
            <el-col :span="2">
              <el-button size="medium" type="primary" @click="getTeacherList">查询</el-button>
            </el-col>

            <!-- 搜索信息 end-->
            <!-- 教师信息上传 start-->

            <el-col :span="2" :offset="10">
              <el-upload
                :auto-upload="true"
                list-type="text"
                name="excelFile"
                :show-file-list="true"
                :action="uploadUrl"
                :limit="1"
              >
                <el-button size="medium" type="primary" class="cic-button">添加</el-button>
              </el-upload>
            </el-col>
            <!-- 教师信息上传 end-->
          </el-row>
        </div>
      </template>
      <!-- 教师详细信息 start-->
      <template>
        <div class="cic-table">
          <el-table :data="teacherList">
            <el-table-column type="index" label="序号" width="180"></el-table-column>
            <el-table-column prop="accountName" label="账号" width="180"></el-table-column>
            <el-table-column prop="realName" label="真实姓名" width="180"></el-table-column>
            <el-table-column prop="genderValue" label="性别" width="180"></el-table-column>
            <el-table-column prop="collegeName" label="学院" width="180"></el-table-column>
            <el-table-column label="登录权限" width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.loginStatus==1?true:false"
                  @change="loginStatus(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="评价权限" width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.commentStatus==1?true:false"
                  @change="commentStatus(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="发布信息权限" width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.otherStatus==1?true:false"
                  @change="otherStatus(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
          </el-table>
          <!-- 教师详细信息 end-->
        </div>
      </template>
      <!-- 分页区域 start-->
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="queryInfo.pageSize"
        :current-page="queryInfo.pageNum"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
      <!-- 分页区域 end-->
    </el-card>
  </div>
</template> 
     

<script>
import qs from "qs";
let cicToken = window.localStorage.getItem("cicToken");
export default {
  data() {
    return {
      // 查询教师信息的参数列表
      queryInfo: {
        teacherName: "",
        // 当前页数
        pageNum: 1,
        // 每页显示的数
        pageSize: 8
      },
      // 老师信息
      teacherList: [],
      // 上传路径
      uploadUrl: "http://172.18.84.23:8888/user-service/teacher/import",
      fileList: [],
      headers: { cicToken: cicToken },
      total: 0,
      // 账号
      accountId: ""
    };
  },
  created() {
    this.getTeacherList();
  },
  methods: {
    open() {
      this.$alert(" <h4>学生权限管理：</h4>", {
        dangerouslyUseHTMLString: true
      });
    },

    // 根据姓名查询教师
    getTeacherList() {
      this.$get(
        this.$urlPath.user +
          "/teachers/" +
          this.queryInfo.pageNum +
          "/" +
          this.queryInfo.pageSize +
          "/" +
          this.queryInfo.teacherName
      ).then(resp => {
        console.log(resp);
        if (resp.code != 200) {
          return this.$message.error(resp.message);
        }
        // 查询成功保存到teacherList
        this.teacherList = resp.data.list;
        this.total = resp.data.total;
      });
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pageNum = newPage;
      this.getTeacherList();
    },
    // 监听登录权限开关按钮
    loginStatus(status) {
      // 关闭登录权限
      if (status.loginStatus == 1) {
        let accountId = status.accountId;
        this.$put_form(this.$urlPath.user + "/status/closeLogin", {
          accountId: accountId
        }).then(resp => {
          if (resp.code != 200) {
            return this.$message.error(resp.message);
          }
          // 将状态置为2
          status.loginStatus = 2;
          return this.$message.success(resp.message);
        });
      }
      // 开启登录权限
      if (status.loginStatus == 2) {
        let accountId = status.accountId;
        this.$put_form(this.$urlPath.user + "/status/openLogin", {
          accountId: accountId
        }).then(resp => {
          if (resp.code != 200) {
            return this.$message.error(resp.message);
          }
          // 将状态置为1
          status.loginStatus = 1;
          return this.$message.success(resp.message);
        });
      }
    },
    // 监听评价权限开关按钮
    commentStatus(status) {
      // 关闭评价权限
      if (status.commentStatus == 1) {
        let accountId = status.accountId;
        this.$put_form(this.$urlPath.user + "/status/closeComment", {
          accountId: accountId
        }).then(resp => {
          if (resp.code != 200) {
            return this.$message.error(resp.message);
          }
          // 将状态置为2
          status.commentStatus = 2;
          return this.$message.success(resp.message);
        });
      }
      // 开启评价权限
      if (status.commentStatus == 2) {
        let accountId = status.accountId;
        this.$put_form(this.$urlPath.user + "/status/openComment", {
          accountId: accountId
        }).then(resp => {
          if (resp.code != 200) {
            return this.$message.error(resp.message);
          }
          // 将状态置为1
          status.commentStatus = 1;
          return this.$message.success(resp.message);
        });
      }
    },
    // 监听发布信息权限开关按钮
    otherStatus(status) {
      // 关闭发布信息权限
      if (status.otherStatus == 1) {
        let accountId = status.accountId;
        this.$put_form(this.$urlPath.user + "/status/closeOther", {
          accountId: accountId
        }).then(resp => {
          if (resp.code != 200) {
            return this.$message.error(resp.message);
          }
          // 将状态置为2
          status.otherStatus = 2;
          return this.$message.success(resp.message);
        });
      }
      // 开启发布信息权限
      if (status.otherStatus == 2) {
        let accountId = status.accountId;
        this.$put_form(this.$urlPath.user + "/status/openOther", {
          accountId: accountId
        }).then(resp => {
          if (resp.code != 200) {
            return this.$message.error(resp.message);
          }
          // 将状态置为1
          status.otherStatus = 1;
          return this.$message.success(resp.message);
        });
      }
    }
  }
};
</script>

<style lang="less">
#teacher {
  @import "../../assets/less/golbal.less";
}
</style>